import React from 'react';
import { Cascader, Form } from 'antd';
import pcqdata from './pcqdata'
import { connect } from 'react-redux';

class EditForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            projects: [],
            grades: ["primary", "junior", "senior"],
        }
        this.checkboxGrades = this.checkboxGrades.bind(this)
        this.checkboxProjects = this.checkboxProjects.bind(this)
    }
    componentDidMount() {

    }
    checkboxGrades(e) {
        let item = e.target.value;
        let items = this.state.grades.slice();
        let index = items.indexOf(item);
        index === -1 ? items.push(item) : items.splice(index, 1);
        this.setState({ grades: items });
    }
    checkboxProjects(e) {
        let item = e.target.value;
        let items = this.state.projects.slice();
        let index = items.indexOf(item);
        index === -1 ? items.push(item) : items.splice(index, 1);
        this.setState({ projects: items });
    }
    change = (type, e) => {
        this.setState({
            [type]: e.target.value
        })
    }
    changeArea = (type, value) => {
        this.setState({
            [type]: value
        })
    }
    onStore = ()=>{
        this.props.dispatch({
            type : 'SELECTSTORE',
            value : this.state
        })
    }
    render() {
        console.log(this.state);
        return (
            <div>
                <div className='form-position'>
                    位置：
                    <Cascader
                        bordered={false}
                        options={pcqdata}
                        onChange={(e) => this.changeArea("info-area", e)}
                        placeholder="请选择位置"
                        className='Area-area'
                    />
                </div>
                <div className='filter-grade'>
                    年级：
                    <div><input name="grade" type="checkbox" value="primary" onChange={this.checkboxGrades} />小学</div>
                    <div><input name="grade" type="checkbox" value="junior" onChange={this.checkboxGrades} />初中</div>
                    <div><input name="grade" type="checkbox" value="senior" onChange={this.checkboxGrades} />高中</div>
                </div>
                <div className='filter-subject'>
                    <div className='form-subject'>科目：</div>
                    <div className='form-subject-list'>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="allprojects" />全科</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="chinese" />语文</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="math" />数学</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="english" />英语</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="physics" />物理</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="chemistry" />化学</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="politics" />政治</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="history" />历史</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="geography" />地理</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="biology" />生物</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="manysubjects" />多科</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="math-olympiad" />奥数</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="mpc" />数理化</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="new-concept" />新概念</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="tutorial-class" />辅导班</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="spoken" />口语</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="computer" />计算机</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="music" />音乐</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="drawing" />绘画</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="composition" />作文</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="calligraphy" />书法</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="korean" />韩语</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="children-class" />幼儿课</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="japanese" />日语</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="cet46" />四六级</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="french" />法语</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="piano" />钢琴</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="army-test" />军考科</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="probability-theory" />概率论</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="linear-algebra" />线性代数</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="advanced-math" />高等数学</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="adult-test" />成人自考</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="college-english" />大学英</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="single-arts" />单招文</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="postgraduate-math" />考研数</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="foreign-teacher" />外教</div>
                        <div><input name="subject" type="checkbox" onChange={this.checkboxProjects} value="other" />其他</div>
                    </div>
                </div>
                <div className='filter-state'>
                    信息状态：
                    <input name="state" type="radio" value="all" onChange={(e) => this.change("info-state", e)} />全部显示
                    <input name="state" type="radio" value="onlycan" onChange={(e) => this.change("info-state", e)} />只显示可接单
                </div>
            </div>
        )
    }

}
export default connect()(EditForm);